/**
 * 列选择
 */

import React, { PureComponent } from 'react';
import { RightOutlined } from '@ant-design/icons';
import { Popover, Tree, message } from 'antd';
import { connect } from 'dva';
import _ from 'lodash';
import style from './index.less';

@connect(({ workStationM }) => ({ workStationM }))
export default class SetColumns extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      selectedKeys: [],
      checkedKeysInfo: [], // 详情和发行人基本信息
    };
  }
  componentDidMount() {
    const {
      workStationM: { checkedKeysInfo },
    } = this.props;
    this.setState({ checkedKeysInfo });
  }

  handleVisibleChange = (visible) => {
    this.setState({
      visible: visible,
    });
    this.props.changeColumns();
  };

  onSelect = (selectedKeys) => {
    this.setState(
      {
        checkedKeysInfo: selectedKeys,
      },
      () => this.handleOk(),
    );
  };

  handleOk = () => {
    const {
      workStationM: { columns },
    } = this.props;
    let newColumnsInfo = _.cloneDeep(columns);
    newColumnsInfo.map((item) => {
      item.display = false;
      this.state.checkedKeysInfo.map((item1) => {
        if (item1 == item.key) {
          item.display = true;
        }
      });
    });
    this.props.dispatch({
      type: 'workStationM/save',
      payload: {
        columns: newColumnsInfo,
        checkedKeysInfo: this.state.checkedKeysInfo,
      },
    });
  };

  render() {
    const {
      workStationM: { columns },
    } = this.props;
    const content = (
      <div>
        <Tree treeData={columns} checkable defaultExpandAll checkedKeys={this.state.checkedKeysInfo} onCheck={this.onSelect} />
      </div>
    );
    return (
      <div>
        <Popover placement='leftTop' content={content} trigger='click' visible={this.state.visible} overlayClassName={style.shstyle} onVisibleChange={this.handleVisibleChange}>
          <div>
            列选择
            <RightOutlined style={{ float: 'right', marginTop: '4px' }} />
          </div>
        </Popover>
      </div>
    );
  }
}
